<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>轮播图</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <link rel="stylesheet" href="../bootstrap.min.css"/>
    <style>
        .carousel-indicators li {
            border: 2px solid white;
            background: #0AB0E8;
        }

        .carousel-indicators li.active {
            background: #F8CD47;
        }
    </style>
</head>

<body>
<div class="container">
    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="2000">
        <!-- 圆圈指示符 -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0"></li>
            <li data-target="#myCarousel" data-slide-to="1" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            <li data-target="#myCarousel" data-slide-to="3"></li>
        </ol>
        <!-- 图片容器 -->
        <div class="carousel-inner">
            <div class="item ">
                <img src="1.jpg" alt="...">
            </div>
            <div class="item active">
                <img src="2.jpg" alt="...">
            </div>
            <div class="item">
                <img src="3.jpg" alt="...">
            </div>
            <div class="item">
                <img src="4.jpg" alt="...">
            </div>
        </div>
    </div>

</div>
<script src="../jquery-1.10.2.min.js"></script>
<script src='../bootstrap.min.js'></script>
</body>
</html>